<template>
    <div class="hotPlay">
        <ul>
            <li v-for="film in dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}
                    <span class="item">{{film.filmType.name}}</span>
                </h3>
                <p>观众评分:
                    <span style="color:#ffb232">{{film.grade}}</span>
                </p>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>
                <p>
                    <span>{{film.nation}}</span> |
                    <span>{{film.runtime}}分钟</span>
                </p>
                
            </li>
        </ul>
    </div>
</template>
<script>
    import http from '@/utils/http.js'
    import Vue from 'vue'
    Vue.filter('actorsfilter',(actors) => {
        // console.log(actors);
        return actors.map(item => item.name).join(' ')
    })
    export default {
        data() {
            return {
                dataList:[]
            }
        },
        mounted() {
            http({
                url:`/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=8816181`,
                headers:{
                'X-Host': 'mall.film-ticket.film.list'
                }
            }).then((res) => {
                // console.log(res)
                this.dataList = res.data.data.films
                })
        },
        methods: {
            goDetail(id){
                // console.log(id);
                this.$router.history.push("/detail/" + id)
            }
        },
    }
</script>
<style lang="scss" scoped>
    li{
        overflow: hidden;
        padding: 10px;
        img{
            float: left;
            width: 100px;
            margin-right: 8px;
        }
        h3{
            font-size: 25px;
            .item{
                font-size: 10px;
                color: white;
                background: #d2d6dc;
                height: 14px;
                line-height: 14px;
                padding: 0 2px;
                border-radius: 2px;
                position: relative;
                bottom: 3px;
            }
        }
        p{
            font-size: 16px;
            color: #797d82;
            margin-top: 6px;
        }
        
        
    }
    .actor{
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>